<template>
    <div class="head">
        <router-link to="/set">
            <span>我的</span>
            <van-icon name="setting-o" style="display: inline" />
        </router-link>




    </div>


    <div class="my">
        <div class="my-id">  
            <img src="../assets/images/1.jpg">
            <div>
                <span>USER20001010823<van-tag color="#ffde7b">vip<van-icon name="diamond-o" /></van-tag></span>
                <div class="nr">
                    <span>20</span>
                    <h5>关注</h5>
                    <span>500</span>
                    <h5>粉丝</h5>
                </div>
            </div>
        </div>

        <div class="huiyuan">
            <img class="image" src="../assets/images/huiyuan.jpg">
        </div>
    </div>

    <div class="zujian">
        <span>财富</span>
        <div class="cai">
            <li>
                <van-icon name="gold-coin" color="#ffdf90"/>
            <h2>测测币</h2>
            </li>
            <li>
                <van-icon name="star" color="#ffdf90"/>
            <h2>小星星</h2>
            </li>
            <li>
                <van-icon name="column" color="#ffdf90"/>
            <h2>报告与测试</h2>
            </li>
            <li>
                <van-icon name="coupon" color="#ffdf90"/>
            <h2>卡卷</h2>
            </li>
            
        </div>
        <img class="image" src="../assets/images/baogao.jpg" >

        <span>记录</span>
        <jilu-nav />
        <span>更多</span>
        <gengduo-nav />

    </div>
    
    <bottom-nav />
</template>

<script>




import BottomNav from '../components/BottomNav.vue'
import JiluNav from '../components/JiluNav.vue'
import GengduoNav from '../components/GengduoNav.vue'
import SettingView from '../views/SettingView.vue'
import a from '../assets/images/1.jpg'
export default {
    components: {
        BottomNav,
        SettingView,
        JiluNav,
        GengduoNav,
    }
}
</script>

<style scoped>
.head span {
    margin-left: 10px;
    color: #606060;
}

.head .van-icon {
    float: right;
    display: inline;
    color: #606060;
    padding-right: 10px;
    padding-top: 10px;
}

.head {
    height: 60px;
    background: #f4f3f3;
    padding-top: 10px;
}



.my {
    background: #f4f3f3;
    padding: 0 10px 0 10px;
    height: 100%;
}

.my-id {
    display: flex;
}
.my-id img{
    float: left;
    width: 80px;
    border-radius: 50%;
    background: #aaddf7;
    border: 1px solid #000;
}

.my-id .nr h5 {
    color: #cecece;
    font-size: 12px;
    padding-top: 25px;
}

.my-id .nr span {
    color: #000;
    font-size: 18px;
    padding: 20px 0 0 10px;
}

.nr {
    display: flex;
    flex-wrap: wrap;
}

.huiyuan .image {
    width: 100%;
}

.zujian {
    padding: 10px;
}

.zujian span {
    font-size: 18px;
    padding: 10px 0 10px 0;
}

.zujian h2 {
    color: #8c8a8a;
    font-size: 12px;
    text-align: center;
    margin: 0;
    padding: 0;
}

.cai {
    display: flex;
    text-align: center;
    margin-top: 15px;
}
.cai .iconfont{
    size:50px;
}
.cai li{
    width: 25%;
}
.zujian .image{
    width: 100%;
    margin-top: 10px;
}
</style>